<script setup lang="ts">
import { useRoute, useRouter } from 'vue-router';
import HeaderBg from './assets/header-fake.svg'
import FooterBg from './assets/footer-fake.svg'
import Tools from './tools.vue'
import Layer from './layer.vue'
import { provide, ref } from 'vue';

// 菜单
const currentRoute = useRoute()
const router = useRouter()
const menus: Array<{
  path: string | null
  title: string
}> = [
  {
    path: '/',
    title: '空域设施服务'
  },
  {
    path: null,
    title: '航路航线服务'
  },
  {
    path: '/monitor',
    title: '飞行监控管理'
  },
  {
    path: null,
    title: '飞行作业服务'
  },
]
const menuClick = (item: { path: string | null, title: string }) => {
  if (item.path) {
    router.push(item.path)
  }
}

// 配置
const leftOpen = ref(false)
const rightOpen = ref(false)

// 切换左侧
const toggleLeft = () => {
  leftOpen.value = !leftOpen.value;
}

// 切换右侧
const toggleRight = () => {
  rightOpen.value = !rightOpen.value;
}

provide('c-aside', {
  leftOpen,
  rightOpen,
  toggleLeft,
  toggleRight
})

</script>

<template>
  <div class="layout">
    <!-- 占位 -->
     <div class="layout-header-fake"></div>
    <!-- 渐变背景 -->
    <div class="layout-header-bg">
      <img width="100%" :src="HeaderBg" alt="">
    </div>
    <header class="layout-header">
      <div class="layout-header-menu">
        <div v-for="(item, index) in menus" :key="index" :class="{
          'layout-header-menu-item': true,
          'layout-header-menu-item-active': currentRoute.path === item.path
        }" @click="menuClick(item)">{{ item.title }}</div>
      </div>
    </header>
    <div class="layout-main-bg"></div>
    <main class="layout-main">
      <!-- 主视图 -->
      <router-view />
    </main>
    <!-- 渐变背景 -->
    <div class="layout-footer-bg">
      <img width="100%" :src="FooterBg" alt="">
    </div>
    <footer class="layout-footer"></footer>
    <!-- 工具栏 -->
     <tools />
     <!-- 图例 -->
     <layer />
  </div>
</template>

<style lang="scss" scoped>
.layout {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;

  &-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 195px;
    background-image: url('./assets/header-bg.svg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 10;

    &-bg {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 5;

      img {
        vertical-align: top;
      }
    }

    &-fake {
      width: 100%;
      // TODO: 如果自适应应该计算
      height: 126px;
    }

    &-menu {
      position: absolute;
      // TODO: 如果自适应应该计算
      bottom: 30px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 15;
      display: flex;
      justify-content: center;
      align-items: center;
      user-select: none;

      &-item {
        width: 128px;
        height: 48px;
        margin-left: 16px;
        cursor: pointer;
        font-family: Source Han Sans CN;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: contain;
        background-image: url('./assets/menu.svg');
        font-size: 18px;
        line-height: 48px !important;
        text-align: center;
        font-weight: bold;
        line-height: normal;
        letter-spacing: normal;
        color: #FFFFFF;

        // &:nth-child(1) {
        //   margin-left: 0;
        //   background-image: url('./assets/menu1.svg');
        // }
        // &:nth-child(2) {
        //   background-image: url('./assets/menu2.svg');
        // }
        // &:nth-child(3) {
        //   background-image: url('./assets/menu3.svg');
        // }
        // &:nth-child(4) {
        //   background-image: url('./assets/menu4.svg');
        // }
      }

      &-item-active {
        background-image: url('./assets/menu-select.svg');

        // &:nth-child(1) {
        //   background-image: url('./assets/menu1-select.svg');
        // }
        // &:nth-child(2) {
        //   background-image: url('./assets/menu2-select.svg');
        // }
        // &:nth-child(3) {
        //   background-image: url('./assets/menu3-select.svg');
        // }
        // &:nth-child(4) {
        //   background-image: url('./assets/menu4-select.svg');
        // }
      }
    }
  }

  &-main {
    position: relative;
    // z-index: 20;

    &-bg {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 1;
      background-image: url('./assets/fake.jpg');
      background-position: center center;
      background-repeat: no-repeat;
      background-size: cover;
    }
  }

  &-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
    background-image: url('./assets/footer-bg.svg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 10;

    &-bg {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 5;

      img {
        vertical-align: bottom;
      }
    }
  }
}
</style>
